<template>
       <div class="content">
            
            <!--加入购物车小球动画-->
            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > 
                <div class="ball" v-show='ballshow' ref="ball"></div>
            </transition>

			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					    <sweiper :lunbotu='lunbotu' :flag='flag'></sweiper> <!--轮播图-->
					</div>
				</div>
			</div>
            
			<div class="mui-card goodsInfo-heard">
				<div class="mui-card-header">{{Info.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						
                        <p class='price'>
                            <span>市场价: <del>￥{{Info.market_price}}</del></span> 
                            <span>销售价：
                                <span class='new'>￥{{Info.sell_price}}</span>
                            </span>
                        </p>

                        <div>
                            <span class='num'>购买数量：</span>
                            <numbox @getBuyNum='getBuyNum' :max='Info.stock_quantity'></numbox>   <!--选择数量-->
                        </div>

                        <p class='btns'>
                            <button type="button" class="mui-btn mui-btn-royal" @click='addToShopCar'> 加入购物车</button>
                            <button type="button" class="mui-btn mui-btn-danger">立即购买</button>
                        </p>

					</div>
				</div>
			</div>
			
            <div class="mui-card goodsInfo-body">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        
						<p>商品货号：{{Info.goods_no}}</p>
						<p>库存情况：{{Info.stock_quantity}}</p>
						<p>上架时间：{{Info.add_time}}</p>
                        <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined" @click='GoodsDesc(Info.id)'>
                            图文介绍
				        </button>
                        <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @click='GoodsComment(Info.id)'>
                            商品评论
                        </button>
					</div>
				</div>
			</div>

		</div>
</template>

<style lang="scss" scoped>
    .content{
        position: relative;
        background-color: #ddd;
        overflow: hidden;
         .ball{
            position: absolute;
            z-index: 99;
            width: 15px;
            height: 15px;
            background-color: red;
            left: 147px;
            top: 381px;
            border-radius: 50%;
        };
        .goodsInfo-heard{
            .price{
            >:last-child{
                margin-left: 10px;
                }
            }
            .mui-card-content-inner{
                .new{
                    color: red;
                    font-weight: 800;
                    font-size: 17px;
                }
                .btns{
                    margin-top: 10px;
                    :last-child{
                        margin-left: 20px;
                    }
                }
            }
        }
        .goodsInfo-body{
            .mui-btn{
                display: block;
                width: 100%;
                margin-bottom: 10px;
            }
        }
        
    }

    .num{
        float: left;
        margin-top: 8px;
    }
</style>


<script>
import sweiper from '../subcomponent/sweiper.vue'
import numbox from '../subcomponent/numbox.vue'

export default {
    data(){
        return {
            id:this.$route.params.id,
            lunbotu:[],
            flag:false,
            Info:[],
            ballshow:false,
            selectedCount:1,
        }
    },
    methods:{
        getGoodsImg(){ //获取轮播图
                this.$http.get('api/getthumimages/'+this.id).then(res=>{
                    // console.log(res)
                    if(res.body.status==0){
                        res.body.message.forEach(item => {
                            item.img = item.src
                        });

                        this.lunbotu = res.body.message
                    }
                })
                // console.log(this.id)
        },

        getInfo(){  //获取商品参数
            this.$http.get('api/goods/getinfo/'+this.id).then(res=>{
                // console.log(res)
                if(res.body.status==0){
                    this.Info=res.body.message[0]
                    // console.log(this.Info)
                }
            })
        },

        GoodsDesc(id){
            this.$router.push({name:'goodsdesc',params:{id}})
        },

        GoodsComment(id){
            this.$router.push({name:'goodscomment',params:{id}})
        },


        addToShopCar() {
            this.ballshow = !this.ballshow;

            var goodsinfo = {
                id:this.id,
                count:this.selectedCount,
                price:this.Info.sell_price,
                selected:true
            };

            this.$store.commit('addToCar',goodsinfo)
            console.log(this.selectedCount)

        },
        beforeEnter(el) {
            el.style.transform = "translate(0, 0)";
        },
        enter(el, done) {
            el.offsetWidth;

            const ball = this.$refs.ball.getBoundingClientRect()
            const carNum = document.querySelector('#carNum').getBoundingClientRect()

            const ballX = carNum.left - ball.left
            const ballY = carNum.top - ball.top
            
            el.style.transform = `translate(${ballX}px, ${ballY}px)`;
            el.style.transition = 'all 1s ease';
            done();
        },
        afterEnter(el) {
            this.ballshow = !this.ballshow;
        },


        getBuyNum(count){
            this.selectedCount = parseInt(count)
            console.log(this.selectedCount)
        } 
    },
    created(){
        this.getGoodsImg()
        this.getInfo()
    },
    components:{
        sweiper,
        numbox
    }
}
</script>